import {
    CancelPreparationButton, ExitRoomButton,
    ModifyTheRoomButton,
    SwapHomeownerButton,
    SwapPlayerPositionButton, TurnOffTheRoomButton
} from "./functionClick.js";
// 渲染玩家空位
function renderPlayerEmptySlot(AddThePlayButton) {
    const emptySlot = document.createElement('div');
    emptySlot.className = 'col-md-6 col-lg-4';

    const playerCard = document.createElement('div');
    playerCard.className = 'player-card h-100 d-flex flex-column justify-content-center align-items-center';

    const addLink = document.createElement('a');
    addLink.id = 'AddPlay';
    addLink.className = 'empty-state';

    const plusIcon = document.createElement('i');
    plusIcon.className = 'bi bi-plus-circle';
    plusIcon.style = 'font-size: 3rem; color: #dee2e6;';

    const plusImage = document.createElement('img');
    plusImage.src = 'img/addPlusSign.png';
    plusImage.style = 'width: 100px;height: 100px;';
    plusImage.alt = '添加玩家';

    const smallText = document.createElement('small');
    smallText.textContent = '添加入游玩';
    addLink.onclick = AddThePlayButton;
    addLink.appendChild(plusIcon);
    addLink.appendChild(plusImage);
    addLink.appendChild(smallText);

    playerCard.appendChild(addLink);
    emptySlot.appendChild(playerCard);

    return emptySlot;
}

// 渲染观战席空状态
function renderSpectatorEmptyState(AddToSpectatorButton) {
    const emptyState = document.createElement('div');
    emptyState.id = 'AddedSpectatorSeats';
    emptyState.className = 'spectator-item spectator-empty-state';

    const plusImage = document.createElement('img');
    plusImage.src = 'img/addPlusSign.png';
    plusImage.style = "width: 50px;height: 50px;";
    plusImage.alt = '添加玩家';

    const smallText = document.createElement('small');
    smallText.textContent = '添加到观战席';
    emptyState.onclick = AddToSpectatorButton;
    emptyState.appendChild(plusImage);
    emptyState.appendChild(smallText);

    return emptyState;
}


/**
 * 渲染 房间标题
 * @param roomName 玩家名称
 * @param roomId 房间ID
 * @param whetherTheHomeownerIsOrNot 是否房主
 */
function RenderRoomTitle(roomName, roomId, whetherTheHomeownerIsOrNot) {
    const roomTitle = document.getElementById('room-info');
    roomTitle.innerHTML = `
         <h2 class="room-title mb-1">${roomName}</h2>
         <p class="room-id mb-0">房间号：${roomId}</p>
    `;
    const roomQuit = document.getElementById('room-quit');

    //退出房间按钮
    let quit = document.createElement("button");
    quit.classList.add('btn', "btn-light", "rounded-pill", "px-3");
    quit.textContent = "退出房间";
    quit.onclick = ExitRoomButton;


    //关闭房间按钮事件 需要 判断 是否房主
    if (whetherTheHomeownerIsOrNot) {
        let shutDown = document.createElement("button");
        shutDown.classList.add('btn', "btn-light", "rounded-pill", "px-3");
        shutDown.textContent = "关闭房间";
        shutDown.onclick = TurnOffTheRoomButton;

        roomQuit.append(shutDown)

        //添加修改房间按钮
        const roomRevise = document.getElementById('room-revise');

        let revise = document.createElement("button");
        revise.classList.add('btn', "btn-light", "rounded-pill", "px-3");

        revise.textContent = "修改房间";

        revise.onclick = ModifyTheRoomButton;
        roomRevise.append(revise)
    }

    roomQuit.append(quit)
}

/**
 * 渲染房间玩家
 * @param userId 玩家ID
 * @param playerAvatarSrc 头像地址
 * @param playerName 玩家名称
 * @param userColor 玩家游玩的阵营
 * @param whetherCurrentUserIsOwnerHouse 当前用户是否为房主
 * @param whetherOrNotYouAreACurrentUser 是否为当前用户
 * @param whetherTheHomeownerIsOrNot 是否房主
 * @param whetherToPrepareOrNot 是否准备
 * @returns {HTMLDivElement}
 */
function RenderRoomPlayer(userId, playerAvatarSrc, playerName, userColor, whetherCurrentUserIsOwnerHouse, whetherOrNotYouAreACurrentUser, whetherTheHomeownerIsOrNot, whetherToPrepareOrNot) {
    // 1. 创建最外层的列容器
    const colDiv = document.createElement('div');
    colDiv.className = 'col-md-6 col-lg-4';

    // 2. 创建玩家卡片
    const playerCard = document.createElement('div');
    playerCard.className = 'player-card h-100';

    // 3. 创建"房主"标签
    if (whetherTheHomeownerIsOrNot) {
        const hostLabel = document.createElement('span');
        hostLabel.className = 'host-label';
        hostLabel.textContent = '房主';
        playerCard.appendChild(hostLabel);
    }

    // 4. 创建玩家头像
    const playerAvatar = document.createElement('img');
    playerAvatar.src = playerAvatarSrc === "default-avatar" ? 'img/default-avatar.jpg' : playerAvatarSrc;
    playerAvatar.alt = '玩家头像';
    playerAvatar.className = 'player-avatar';

    // 5. 创建玩家名字
    const ElementPlayerName = document.createElement('h5');
    ElementPlayerName.className = 'player-name';
    ElementPlayerName.textContent = playerName;

    // 6. 创建准备状态
    const playerStatus = document.createElement('span');
    playerStatus.className = 'player-status status-ready';
    playerStatus.textContent = whetherToPrepareOrNot ? '已准备' : '未准备';
    // 7. 创建玩家阵营
    const UserCamps = document.createElement('span');
    UserCamps.className = 'player-status status-ready';
    UserCamps.textContent = userColor === "BLUE" ? '黑色' : '红色';

    // 8. 创建操作按钮容器
    const playerActions = document.createElement('div');
    playerActions.className = 'player-actions text-center';

    // 9. 创建"交换位置"按钮
    if (!whetherOrNotYouAreACurrentUser) {
        const swapBtn = document.createElement('button');
        swapBtn.className = 'btn btn-action btn-swap w-100';
        swapBtn.innerHTML = '交换位置';
        swapBtn.setAttribute('data-userId', userId)
        swapBtn.onclick = SwapPlayerPositionButton;

        // 渲染交换房主按钮
        if (whetherCurrentUserIsOwnerHouse) {
            const whetherCurrentUserIsOwnerHouseBtn = document.createElement('button');
            whetherCurrentUserIsOwnerHouseBtn.className = 'btn btn-action btn-spectate w-100';
            whetherCurrentUserIsOwnerHouseBtn.innerHTML = "交换房主";
            whetherCurrentUserIsOwnerHouseBtn.onclick =SwapHomeownerButton;
            playerActions.appendChild(whetherCurrentUserIsOwnerHouseBtn);
        }

        playerActions.appendChild(swapBtn);
    }

    // 10. 创建"取消准备"按钮
    if (whetherOrNotYouAreACurrentUser) {
        const spectateBtn = document.createElement('button');
        spectateBtn.className = 'btn btn-action btn-spectate w-100';
        spectateBtn.innerHTML = whetherToPrepareOrNot ? '取消准备' : "准备";
        spectateBtn.onclick = CancelPreparationButton;

        let CurrentUserLabel = document.createElement('span');
        CurrentUserLabel.className = "current-user-label";
        CurrentUserLabel.innerHTML = "我";

        playerCard.appendChild(CurrentUserLabel);
        playerActions.appendChild(spectateBtn);
    }

    // 11. 组装所有元素
    playerCard.appendChild(playerAvatar);
    playerCard.appendChild(ElementPlayerName);
    playerCard.appendChild(playerStatus);
    playerCard.appendChild(UserCamps);
    playerCard.appendChild(playerActions);

    colDiv.appendChild(playerCard);

    // 最终将生成的元素添加到页面中
    return colDiv;
}


/**
 * 渲染观战者
 * @param playerAvatarSrc 头像地址
 * @param playerName 玩家名称
 * @param whetherTheHomeownerIsOrNot 是否房主
 * @returns {HTMLDivElement}
 */
function renderSpectators(playerAvatarSrc, playerName, whetherTheHomeownerIsOrNot,) {
    // 创建观战者项
    const item = document.createElement('div');
    item.className = 'spectator-item'; // 保留原始的空格类名逻辑

    // 如果是房主，添加房主标签
    if (whetherTheHomeownerIsOrNot) {
        const hostLabel = document.createElement('span');
        hostLabel.className = 'host-label';
        hostLabel.textContent = '房主';
        item.appendChild(hostLabel);
    }

    // 添加头像
    const avatar = document.createElement('img');
    avatar.className = 'spectator-avatar';
    avatar.src = playerAvatarSrc === "default-avatar" ? 'img/default-avatar.jpg' : playerAvatarSrc;
    avatar.alt = '观战者头像';
    item.appendChild(avatar);

    // 添加名称
    const name = document.createElement('span');
    name.className = whetherTheHomeownerIsOrNot ? 'host-spectator-name' : 'spectator-name';
    name.textContent = playerName;
    item.appendChild(name);
    return item;
}

export {
    RenderRoomTitle, RenderRoomPlayer, renderSpectators
}